import React, { Component } from 'react';
import {observer } from 'mobx-react';
import { Route, withRouter } from 'react-router-dom';
import { InputItem, Icon, Radio, List, Tools,Switch} from 'weaver-mobile';
import {RouteLayout} from 'weaver-mobile-page';

const ButtonGroup = RouteLayout.ButtonGroup;
const RadioItem = Radio.RadioItem;
const FormItem = List.FormItem;
const getLabel = Tools.getLabel;
const renderKey = 'approvalSettings';
const renderPath = '/req/approvalSettings';

function noop() { }

@withRouter
@observer
export default class ApprovalSettingsSelect extends Component {
    static displayName = 'ApprovalSettingsSelect';
    static defaultProps = {
        prefixCls: 'wm-select-page',
        valueArray: [],
        selectValueArray: [], // 记录路由模式选中的value
        options: [],
        getContainer: noop,
        onChange: noop,
        viewAttr: 2,
        showCount: false,
    }

    constructor(props) {
        super(props);
        this.state = {
            valueArray: props.valueArray,
            selectValueArray: props.valueArray,
        };
    }

    componentWillReceiveProps(nextProps) {
        const { valueArray } = nextProps;
        if (valueArray) {
            // Modal勾选数据 和 外部input显示数据 统一
            const valueChanged = this.compare(this.state.valueArray, valueArray);
            const selectValueChanged = this.compare(this.state.selectValueArray, valueArray);
            if (valueChanged || selectValueChanged) {
                this.setState({
                    valueArray,
                    selectValueArray: valueArray,
                });
            }
        }
    }

    compare = (currentArr, nextArr) => {
        let change = false;
        if (currentArr.length !== nextArr.length) {
            change = true;
        } else if (nextArr.length > 0) {
            nextArr.map((v) => {
                if (currentArr.indexOf(v) < 0) {
                    change = true;
                }
            });
        }
        return change;
    }

    reviseVal =(arr) => {
        let temp_val =['1','2','3','4','5','6','7'];
        let temp_checked = {};
        temp_val.map(vkey => {
            temp_checked[vkey] = arr.indexOf(vkey) > -1;
        });

        if(temp_checked['1'] == true) {
            temp_checked['2'] = true;
        }else {
            temp_checked['3'] = false;
            temp_checked['4'] = false;
        }

        if(temp_checked['2'] == false){
            temp_checked['5'] = false;
        }

        if(temp_checked['1']== false&&temp_checked['2']==false){
            temp_checked['6'] = false;
            temp_checked['7'] = false;
        }
        let val = [];
        temp_val.map(vkey => {
            if(temp_checked[vkey] == true){
               val.push(vkey);
            }
        });
        return val;
    }


    reviseOpt =(options) => {
        let arr = this.state.selectValueArray.map(item => item);
        const checkOne = arr.indexOf('1') > -1;
        const checkTwo = arr.indexOf('2') > -1;
        let tmpOptions = options.map((item) => {
            if(item.key == '3' || item.key == '4') {
                item.disabled = !checkOne;
            }
            if(item.key == '2') {
                item.disabled = checkOne;
            }
            if(item.key == '5') {
                item.disabled = !checkTwo;
            }
            if(item.key == '6' || item.key == '7') {
                item.disabled = !checkOne&&!checkTwo;
            }
            return item;
        })
        return tmpOptions;
    }

    itemClick = (v) => {
        const { options, multiChoose, onItemChange } = this.props;
        let arr = this.state.selectValueArray.map(item => item);
        if (multiChoose) { // 多选
            if (arr.indexOf(v.key) > -1) {
                arr.splice(arr.indexOf(v.key), 1);
            } else {
                arr.push(v.key);
            }
            arr = this.reviseVal(arr);
        } else { // 单选
            const cancelOption = options.filter(val => val.showname === '') || [];
            if (cancelOption.length > 0 && arr.indexOf(v.key) > -1) {
                arr = [];
            } else {
                arr = [v.key];
            }
        }
        if (onItemChange) { onItemChange(v); }
        this.setState({ selectValueArray: arr });
    }

    submit = () => {
        const { options } = this.props;
        const { selectValueArray } = this.state;
        const arr = [];
        this.setState({ valueArray: selectValueArray });
        this.props.history.go(-1);
        if (this.props.onChange) {
            options.map((v) => {
                if (selectValueArray.indexOf(v.key) > -1) {
                    arr.push({
                        key: v.key,
                        showname: v.showname,
                    });
                }
            });
            this.props.onChange(arr);
        }
    }

    renderRoute = () => {
        const {getContainer, options, prefixCls, showCount } = this.props;
        const { selectValueArray } = this.state;
        const items = [];
        let tmpOptions = this.reviseOpt(options);
        // tmpOptions.map((v) => {
        //     if (v.showname !== '') {
        //         items.push(
        //             <RadioItem
        //                 key={v.key}
        //                 disabled={v.disabled || false}
        //                 checked={selectValueArray.indexOf(v.key) > -1}
        //                 onClick={() => this.itemClick(v)}
        //             >
        //                 {v.showname}
        //             </RadioItem>,
        //         );
        //     }
        // });
        tmpOptions.map((v) => {
            if (v.showname !== '') {
                items.push(
                    <List.Item
                        key={v.key}
                        className={'wf-free-haoqian-list-item'}
                        extra={<Switch
                            key={v.key}
                            disabled={v.disabled || false}
                            checked={selectValueArray.indexOf(v.key) > -1}
                            onClick={(bool) => this.itemClick(v,bool)}
                        />}
                    >
                        {v.showname}
                    </List.Item>
                );
            }
        });
        return (
            <Route
                key={renderKey}
                path={renderPath}
                render={() =>
                    (
                        <RouteLayout getContainer={getContainer}>
                            <div className={`wm-select-page-modal wm-route-layout`} key={renderKey}>
                                <List>{items}</List>
                                <ButtonGroup
                                    data={[{
                                        key: 'submit',
                                        text: showCount && this.state.selectValueArray.length > 0 ? `${getLabel(83446, '确定')}(${this.state.selectValueArray.length})` : getLabel(83446, '确定'),
                                        onClick: () => this.submit(),
                                        type: 'primary',
                                    }]}
                                />
                            </div>
                        </RouteLayout>
                    )
                }
            />
        );
    }

    getValue = () => {
        const { options } = this.props;
        const { valueArray } = this.state;
        const values = [];
        options.map((v) => {
            if (valueArray.indexOf(v.key) > -1) {
                values.push(v.showname);
            }
        });
        return values.join(', ');
    }

    render() {
        const {prefixCls,className, style,placeholder, viewAttr, history } = this.props;
        const wrapCls = className||prefixCls;
        const content = (
            <InputItem
                value={this.getValue()}
                placeholder={viewAttr !== 1 ? (placeholder || getLabel(18214, '请选择')) : ''}
                editable={false}
            />
        );
        const itemChild = (
            <div className={`${wrapCls}-input`} onClick={() => { if (viewAttr !== 1) { history.push(renderPath); } }}>
                <FormItem
                    extra={viewAttr !== 1 ? <Icon type="right" /> : ''}
                    line
                    border
                    wrap="nowrap"
                    required={viewAttr === 3 && this.state.valueArray.length === 0}
                    content={content}
                />
            </div>
        );
        return (
            <div className={wrapCls} style={style}>
                {itemChild}
                {this.renderRoute()}
            </div>
        );
    }
}

